<template>
	<view>
		<!-- mask层 -->
		<view :class="['mask', show ? '' : 'visible']"></view>
		<!-- 金额 -->
		<view :class="['content', show ? '' : 'contenthide']">
			<view class="btn-close flex-center" @click="close">
				<text class="dy-iconfont icon-guanbi"></text>
			</view>
			<view class="title">请输入安全密码</view>
			<view :class="['code', show ? '' : 'visible']">
				<view class="code-box">
					<view v-for="(item, index) in 6" :key="index"
						:class="['code-box-item flex-center', {'active' : password[index]}]">
						{{ (password[index] && '●') || '' }}
					</view>
				</view>
				<input class="number-input" type="number" v-model="password" />
			</view>
			<view class="btn-forgetPassword-wrapper">
				<text class="btn-forgetPassword" @click="onSetSecurityPassword">忘记密码？</text>
			</view>
		</view>
		<!-- 键盘 -->
		<view :class="['keyboard', show ? '' : 'active']">
			<view v-for="(item, index) in 9" :key="index" class="keyboard-item" hover-class="keyboard-item-hover"
				@click="key(index + 1)">{{index + 1}}</view>
			<view class="keyboard-item hide"></view>
			<view class="keyboard-item" hover-class="keyboard-item-hover" @click="key(0)"><text>0</text></view>
			<view class="keyboard-item delte flex-center" @click="del()">
				<text class="dy-iconfont icon-jianpanshanchu"></text>
			</view>
		</view>

	</view>
</template>

<script>
	const app = getApp();
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
      target: String, // 弹窗后要做的事情，组件不做处理，会在 success 回调中返回
      params: Object, // 传参，组件不做处理，会在 success 回调中返回
		},
		data() {
			return {
				password: '',
			};
		},
		methods: {
			key(key) {
				if (this.password.length < 6) {
					this.password += key;
					if (this.password.length == 6) {
						// 校验二级密码
						app._post_form('user/checkPayPassword', {
							pay_password: this.password
						}, (res) => {
							if (1 == res.code) {
								this.close();
								this.$emit('success', this.target, this.params);
							}
						})
					}
				}
			},
			reset() {
				this.password = '';
			},
			close() {
				this.reset();
				this.$emit('close', false);
			},
			del() {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			onSetSecurityPassword() {
				uni.navigateTo({
					url: '/pages/user/setting/security'
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/utils/iconfont-dy.css";

	.number-input {
		display: none;
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mask {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		transition: all 0.3s ease;
		background: rgba(0, 0, 0, 0.6);
		opacity: 1;
		z-index: 20;
		visibility: visible;
	}

	.content {
		padding: 60rpx 40rpx 40rpx;
		border-radius: 10rpx;
		position: fixed;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background: #fff;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
		z-index: 20;
		opacity: 1;
		visibility: visible;
		transition: all 0.3s ease;
	}

	.contenthide {
		opacity: 0;
		z-index: 0;
		visibility: hidden;
	}

	.visible {
		opacity: 0;
		z-index: 2;
		visibility: hidden;
	}

	.title {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 90rpx;
	}

	.btn-close {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.btn-close .dy-iconfont {
		font-size: 40rpx;
	}

	.code {
		width: 100%;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}

	.code-box {
		display: flex;
	}

	.code-box-item {
		box-sizing: border-box;
		width: 84rpx;
		height: 84rpx;
		background: #F0EFF4;
		border: 1rpx solid #EBEBED;
		font-size: 40rpx;
	}

	.code-box-item.active {
		border: 1rpx solid #DFBC6B;
	}

	.code-box-item:nth-child(n+2) {
		margin-left: 10rpx;
	}

	.btn-forgetPassword-wrapper {
		width: 100%;
		text-align: right;
	}

	.btn-forgetPassword {
		display: inline-block;
		height: 80rpx;
		line-height: 80rpx;
		color: #999;
		font-size: 28rpx;
	}

	.keyboard {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #EBEBEB;
		display: flex;
		justify-content: center;
		z-index: 20;
		flex-wrap: wrap;
		transition: all 0.2s ease-in 0.2s;
	}

	.keyboard.active {
		bottom: -400rpx;
	}

	.keyboard-item {
		box-sizing: border-box;
		width: 250rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		font-size: 40rpx;
		color: #333;
		height: 99rpx;
		border-top: none;
		border-left: none;
		-webkit-transition: background 0.3s;
		transition: background 0.3s;
	}

	.keyboard-item:nth-child(n-9) {
		border-bottom: 1rpx solid #f9f9f9;
	}

	.keyboard-item:nth-child(3n-1) {
		border-left: 1rpx solid #f9f9f9;
		border-right: 1rpx solid #f9f9f9;
	}

	.keyboard-item-hover {
		background: rgba(255, 255, 255, 0.6);
	}

	.hide {
		opacity: 0;
	}

	.delte {
		background: none;
		box-shadow: none;
	}

	.delte .dy-iconfont {
		font-size: 50rpx;
	}
</style>
